<style lang="scss" scoped>
.set_phone {
  .btn {
    width: 96%;
    margin: 10px auto;
  }

  .remark {
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
    color: rgb(160, 158, 158);
    line-height: 26px;
  }
  .van-popup--center.van-popup--round {
    border-radius: 4px;
  }
  .inp {
    padding-top: 40px;
  }
}
.van-field__error-message {
  background-color: red;
}
</style>
<template>
  <div class="set_phone baseW fixed">
    <!-- 顶部导航 -->
    <van-nav-bar title="手机号" left-arrow @click-left="$router.go(-1)" />
    <template v-if="off">
      <van-cell-group>
        <van-cell title="手机号" :value="$store.getters.filterPhone" />
      </van-cell-group>
      <!-- 按钮 -->
      <van-button
        class="btn"
        color="#FF6600"
        type="primary"
        block
        @click="off = false"
        >更换手机号码</van-button
      >
    </template>
    <template v-else>
      <van-cell-group>
        <van-field
          class="un"
          v-model="value"
          input-align="right"
          colon
          center
          clickable
          autofocus
          maxlength="11"
          label-width="100px"
          label="手机号"
          type="tel"
          placeholder="请输手机号码"
        />
        <van-field
          v-model="sms"
          center
          clearable
          maxlength="4"
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              @click="sendVerificationCode"
              :disabled="oldSetTimeOutBool"
              >{{ oldSeconds ? oldSeconds + "s" : "发送验证码" }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <van-button
        class="btn"
        color="#FF6600"
        type="primary"
        block
        :disabled="sms.length == 4 ? false : true"
        @click="interlayer = true"
        >立即验证</van-button
      >
    </template>

    <p class="remark">
      注:更换后账户信息不变,当前号码作废,下次使用新手机号码登录!
    </p>
    <!-- 弹出层 -->
    <van-popup
      v-model="interlayer"
      closeable
      :style="{ height: '30vh', width: '90%' }"
      round
    >
      <!-- 输入手机号，调起手机号键盘 -->
      <div class="inp">
        <van-field
          v-model="newTel"
          maxlength="11"
          type="tel"
          label="新手机号"
        />
        <van-field
          v-model="newSms"
          center
          clearable
          maxlength="4"
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              @click="sendNewVerificationCode"
              :disabled="newSetTimeOutBool"
              >{{ newSeconds ? newSeconds + "s" : "发送验证码" }}</van-button
            >
          </template>
        </van-field>
      </div>
      <van-button
        color="#FF6600"
        style="width: 90%; margin: 0 auto"
        type="primary"
        block
        @click="verification"
        >确定更换</van-button
      >
    </van-popup>
  </div>
</template>

<script>
// import '../../assets/css/border.less'
import { updatePhone } from "../../api/user";
import { Toast } from "vant";
export default {
  data: () => ({
    off: true,
    value: "",
    sms: "",
    oldSeconds: "",
    newSeconds: "",
    oldSetTimeOutBool: false,
    newSetTimeOutBool: false,
    oldTime: null,
    newTime: null,
    oldNum: 10,
    newNum: 10,
    interlayer: false,
    newTel: "",
    newSms: "",
  }),
  methods: {
    // 确定更改
    async verification() {
      // console.log('立即验证');
      let { newTel } = this;
      let return_msg = await updatePhone({ new_phone: newTel });
      if (!return_msg.data.ok) {
        Toast.success("修改成功");
        // 更改vuex中的手机号码
        this.$store.commit("setUserPhone", newTel);
        setTimeout(() => {
          this.$router.go(-1);
        }, 500);
      }
    },
    // 发送验证码old
    sendVerificationCode() {
      this.oldSetTimeOutBool = true;
      if (this.oldSetTimeOutBool) {
        console.log("可以计时了");
        let { oldNum } = this;
        this.oldSeconds = oldNum;
        this.oldTime = setInterval(() => {
          --oldNum;
          if (oldNum < 1) {
            this.oldSetTimeOutBool = false;
            clearInterval(this.oldTime);
            this.oldSeconds = "";
          }
          this.oldSeconds = oldNum;
        }, 1000);
      }
    },
    // 发送验证码new
    sendNewVerificationCode() {
      this.newSetTimeOutBool = true;
      if (this.newSetTimeOutBool) {
        console.log("可以计时了");
        let { newNum } = this;
        this.newSeconds = newNum;
        this.time = setInterval(() => {
          --newNum;
          if (newNum < 1) {
            this.newSetTimeOutBool = false;
            clearInterval(this.time);
            this.newSeconds = "";
          }
          this.newSeconds = newNum;
        }, 1000);
      }
    },
  },
};
</script>